<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>订单结算</title>
	<link rel="stylesheet" href="../css/common.css">
	<style>
		body{
			background-color: #f5f5f5;
		}
		.payOrder{
			padding: 1rem;
		}
		.payInfor{
			box-shadow: 0px 2px 10px rgba(204, 204, 204, 0.349019607843137);
			padding: 1rem;
			color: #666;
			margin-bottom: 1rem;
			background-color: #fff;
		}
		.classBox {
			display: flex;
			box-shadow: 0px 2px 10px rgba(204, 204, 204, 0.349019607843137);
			padding: 1rem;
			box-sizing: border-box;
			align-items: center;
			margin-bottom: 1rem;
			background-color: #fff;
		}
		
		.classLeft {
			width: 9.0625rem;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 1rem .5rem;
			box-sizing: border-box;
			font-size: 0.75rem;
		}
		
		
		.classIntro {
			width: 100%;
		}
		
		.className {
			color: #fff;
			font-weight: bold;
		}
		
		.fudao {
			color: #ddd;
		}
		
		.classLeft img {
			width: 1.4rem;
		}
		
		.classRight {
			margin-left: 1rem;
			width: 53%;
		}
		
		.r_title {
			font-weight: bold;
			margin-bottom: .5rem;
		}
		
		.r_num {
			float: right;
			color: #999;
		}
		
		.price {
			float: left;
		}
		
		.price img {
			height: 1rem;
		}
		
		.price span {
			font-size: 0.75rem;
			font-weight: bold;
			color: #FF0000;
		}
		.huiyuan{
			box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.349019607843137);
			padding: 2rem .5rem 1rem;
			position: relative;
		}
		.VipImg{
			position: absolute;
			top: 0;
			left: 0;
			height: 1.5rem;
			overflow: hidden;
		}
		.VipImg img{
			height: 1.5rem;
		}
		.huiyuanPrice{
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.chengwei{
			color: #333;
			/* margin-bottom: .5rem; */
		}
		.profit{
			color: #FF0000;
		}
		.p_right{
			display: flex;
			align-items: center;
		}
		.p_money{
			font-size: 1rem;
			font-weight: bold;
			margin-right: .5rem;
		}
		.p_right img{
			width: 1.5rem;
		}
		.sels{
			display: none;
		}
		.payBtm{
			position: fixed;
			bottom: 0;
			width: 100%;
		}
		.payMoney{
			font-size: 1rem;
			font-weight: bold;
			color: #FF0000;
			padding-left: 1rem;
			float: left;
			line-height: 3rem;
		}
		.lijiPay{
			width: 50%;
			text-align: center;
			height: 3rem;
			line-height: 3rem;
			float: right;
			color: #fff;
			background-color: #0075FF;
		}
	</style>
</head>
<body>
	<div class="tabsBox">
		<div class="topTab">
			<div class="tabLeft">
				<img src="../assets/left_J.png" >
			</div>
			<div class="tabCenters">订单结算</div>
			<!-- <div class="tabRight">收益说明</div> -->
		</div>
	</div>
	<div class="payOrder">
		<div class="payInfor">
			<div class="payName">会员名称: 小小少年</div>
			<div class="payNo">订单编号：1239123891283012</div>
		</div>
		<div class="classBox">
			<div class="classLeft pur">
				<div class="classIntro">
					<div class="className">抖音100W粉丝</div>
					<div class="fudao">外教一对一辅导</div>
				</div>
			</div>
			<div class="classRight">
				<div class="r_title">抖音100W粉丝</div>
				<div class="r_stydy cleardrift">
					<div class="price">
						<span>￥2999.00</span>
					</div>
				</div>
			</div>
		</div>
		<div class="huiyuan">
			<div class="VipImg">
				<img src="../assets/bac.png" >
			</div>
			<div class="huiyuanPrice">
				<div class="p_left">
					<div class="chengwei">成为黄金会员，全战视频免费看</div>
					<div class="profit">还可享受邀请用户最高40%收益</div>
				</div>
				<div class="p_right">
					<div class="p_money">¥298</div>
					<img src="../assets/sel_un.png" class="sel">
					<img src="../assets/sel.png" class="sels">
				</div>
			</div>
		</div>
	</div>
	<div class="payBtm">
		<div class="payMoney">￥29.00</div>
		<div class="lijiPay">立即支付</div>
	</div>
</body>
<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script>
	$('.sel').click(function(){
		$('.sels').show()
		$('.sel').hide()
	})
	$('.sels').click(function(){
		$('.sel').show()
		$('.sels').hide()
	})
</script>
</html>